<template>
  <div>
    <header_slot></header_slot>
    <!-- 搜索栏 -->
    <select_slot></select_slot>
    <div class="box">
      <ul class="clearfix">
        <li
          @click="clicks(item, index)"
          v-for="(item, index) in productarr"
          :key="index"
        >
          <div class="productbox">
            <div class="pic">
              <img :src="productarr[index].pic" alt="" />
            </div>
            <div class="proname">
              {{ productarr[index].proname }}
            </div>
            <div class="price">
              {{ productarr[index].price }}
            </div>
            <div class="canshu"><span>128GB</span> <span>6.1英寸</span></div>
            <div class="pj"><span>500万+</span>条评价</div>
            <div class="tips">
              <div>自营</div>
              <div>放心购</div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <footer_slot></footer_slot>
  </div>
</template>

<script>
import header_slot from "./header-slot";
import select_slot from "./select-slot";
import footer_slot from "./footer-slot";
export default {
  components: {
    header_slot,
    select_slot,
    footer_slot,
  },
  data() {
    return {
      arr: [],
      productarr: [
        {
          pic: "",
          // spic:['./static/img/list2.png','./static/img/list3.png','./static/img/list4.png'],
          price: "",
          proname: "",
        },
      ],
    };
  },
  methods: {
    clicks(item, index) {
      this.$router.push({
        path: "/commodityDetails",
        query: { goodsid: item.goodsId, id: item.skuId },
      });
    },
  },
  mounted() {
    this.$axios
      .post("/CommodityType/getListByTypeId", {
        commodityTypeId: this.$route.query.id,
      })
      .then((res) => {
        for (let i = 0; i < res.data.data.length; i++) {
          this.productarr.push({
            goodsId: res.data.data[i].goodsId,
            skuId: res.data.data[i].skuId,
            proname: res.data.data[i].goodsName,
            price: res.data.data[i].goodsPrice,
            pic: res.data.data[i].goodsImage,
          });
        }
        this.productarr.shift();
      });
  },
};
</script>

<style scoped="scoped">
.box ul li {
  width: 238px;
  height: 367px;
  list-style: none;
  float: left;
  cursor: pointer;
}
.box::after {
  content: "";
  display: block;
  clear: both;
}
.box {
  width: 1200px;
  margin: auto;
}
.productbox {
  width: 220px;
  padding: 12px 9px;
  overflow: hidden;
  white-space: nowrap;
}
.pic img {
  width: 220px;
  height: 220px;
}
.s-pic {
}
.s-pic img {
  margin-right: 10px;
  width: 30px;
  height: 30px;
}
.price {
  color: red;
  font-size: 20px;
  margin-top: 5px;
}
.canshu {
  margin-top: 3px;
  line-height: 20px;
  color: rgb(153, 153, 153);
}
.canshu span {
  padding: 3px;
  background-color: rgb(244, 244, 244);
}
.pj {
  margin-top: 5px;
  color: #a7a7a7;
}
.pj span {
  color: #646fb0;
  font-weight: 700;
}
.tips {
  margin-top: 10px;
  display: flex;
}
.tips div:nth-child(1) {
  background-color: #e23a3a;
  border-radius: 2px;
  margin-right: 5px;
  padding: 2px 5px;
  color: white;
}
.tips div:nth-child(2) {
  color: #4d88ff;
  border-radius: 2px;
  padding: 2px;
  border: 1px solid #4d88ff;
}
</style>
